<template>
  <div class="contractDetails">
    <van-button round type="success">合同基本信息</van-button>
    <div class="contractDetails-info">
      <projectInfo
        :labelWidth="11"
        :formData="data.contractFormData"
        :config="data.contractDetails"
      ></projectInfo>
    </div>
    <tab
      class="contractDetails-tab"
      :config="data.tabConfig"
      v-model="queryForm.tabActive"
    >
    </tab>
    <div class="contractDetails-bill">
      <ysnTable
        :data="selectBillTableList"
        :column="data.billTableConfig"
      >
      </ysnTable>
    </div>

  </div>
</template>

<script setup lang="ts">
import { computed, reactive } from "vue";
import { config } from './config'
import { ProjectListApi } from "@/api/projectList";
import { useRoute } from "vue-router";
import baseStore from "@/store";
const store = baseStore()
const route = useRoute()
let queryForm = reactive({
  tabActive: 0
})
let data = reactive({
  contractFormData: {},
  contractDetails: [],
  tabConfig: [],
  billTableList: [],
  billTableConfig: []
})
config(data)

let selectBillTableList = computed(() => {
  return queryForm.tabActive === 0 ? data.billTableList : data.billTableList.filter((item: { incomeTypeId: number; }) => item.incomeTypeId === (queryForm.tabActive - 1))
})

init()
function init(){
  Promise.all([
    ProjectListApi.accountContractQueryById({
      id: route.query.id as string
    }),
  
  ]).then(res => {
    res.forEach((val, index: number) => {
      switch (index) {
        case 0:
          data.contractFormData = {
            ...val.accountContract,
            groupCompanyName: store.baseCompany.find(item => item.id === val.accountContract.groupCompanyId)?.label,
            projectName: route.query.projectName
          }
          data.billTableList = val.accountContractBillList
          break;
       
        default:
          break;
      }
    });
  })
}
</script>

<style lang="scss">
.contractDetails{
  &-info{
    padding-top: 0.5rem;
    padding-left: 1.2rem;
    margin-bottom: 2.4rem;
  }

  &-tab{
    width: 27.2rem;
    margin-left: -0.5rem;
  }

  &-bill{
    width: 100%;
    overflow: auto;
    margin-top: 1rem;
    padding-bottom: 1rem;

    &--btn{
      margin-top: 1.6rem;
      margin-bottom: 1.1rem;
    }
  }
}
</style>
